<template>
	<el-container id="agent-center">
		<!-- 头部区域 -->
		<el-header>
			<el-menu class="el-menu-demo" mode="horizontal">
				<el-menu-item index="1" class="right-menuitem" @click="dialogVisible=true">我的资料</el-menu-item>
			</el-menu>
		</el-header>
		<!-- 主要区域 -->
		<el-main>
			<div class="main">
				<h4>当前审核进度：</h4>
				<el-steps style="height: 300px;" :active="active" direction="vertical" :process-status='processStatus'>
					<el-step v-for="(item,index) in stepArr" :title="item" :key="index"></el-step>
				</el-steps>
				<div class="btns">
					<!-- <el-button type="primary" :disabled="canbtn1">修改基本资料开始第①步</el-button> -->
					<el-button type="primary" v-if="canbtn1" @click="dialogVisible2=true" v-no-more-click:3000>完善资料：开始第③步</el-button>
					<el-button type="primary" v-if="canbtn2" v-no-more-click:3000>重新完善资料：开始第④步</el-button>
				</div>
			</div>
		</el-main>
		<el-dialog center  title="我的资料" class="means" :visible.sync="dialogVisible">
			手机号码：{{$store.state.agent.phone}}<br />
			用户名：{{$store.state.agent.name}}<br />
			邮箱：{{$store.state.agent.email}}<br />
			代理师资格证：{{$store.state.agent.certificate}}<br />
			擅长领域：{{$store.state.agent.territory}}<br />
			从业年限：{{$store.state.agent.work_limit}}<br />
			从业经历：{{$store.state.agent.experience}}<br />
			预估月处理单数：{{$store.state.agent.mon_num}}<br />
			<br />
			<font color="#3A8EE6">更多<i class="el-icon-d-arrow-right"></i></font>
			<hr />
			身份证：{{$store.state.agent.id_card}}<br />
			资格证：{{$store.state.agent.experience}}<br /><br />
			<center>
				<el-button type="primary" @click="dialogVisible = false" v-no-more-click:3000>关闭</el-button>
			</center>
		</el-dialog>
		<el-dialog center title="完善更多资料" :visible.sync="dialogVisible2">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="身份证" prop="IDCard">
					<el-input v-model="form.IDCard"></el-input>
				</el-form-item>
				<el-form-item label="资格证" prop="QC">
					<el-input v-model="form.QC"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false" v-no-more-click:3000>取 消</el-button>
				<el-button type="primary" @click="addMaterial" v-no-more-click:3000>确 定</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>

<script>
	import aes from '~/util/aes.js'
	let hasQC= false;
	export default {
		data() {
			return {
				stepArr: [],
				active: 0,
				processStatus: 'success',
				canbtn1: false,
				canbtn2: false,
				dialogVisible: false,
				dialogVisible2:false,
				form: {
					IDCard: '',
					QC:''
				},
				rules: {
					IDCard: [{
						required: true,
						validator: function(rule, value, callback) {
							if (value === '') {
								callback(new Error('请填写身份证'));
							} else if (!(/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(value))) {
								callback(new Error('身份证格式错误'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					QC:[{
						required: hasQC?true:false,
						validator: function(rule, value, callback) {
							if (value === '') {
								if(hasQC){
									callback(new Error('请填写代理师资格证'));
								}else{
									callback();
								}
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}]
				},
			}
		},
		async asyncData({
			$axios,
			store,
			app: {
				$cookies
			}
		}) {
			let res = await getAgentDetails($axios, store.state.agent.id);
			if (res.data.code == 200) {
				//更新用户信息！
				store.commit("setAgent",res.data.data);
				let obj = {
					stepArr: []
				}
				hasQC=store.state.agent.certificate=='有';
				switch (res.data.data.status) {
					case '待初审':
						obj.stepArr = ['待初审', '初审通过/初审未通过', '已上传资料', '已激活/未激活'];
						obj.active = 0;
						break;
					case '初审通过':
						obj.stepArr = ['待初审', '初审通过', '已上传资料', '已激活/未激活'];
						obj.active = 1;
						obj.canbtn1 = true;
						break;
					case '初审未通过':
						obj.stepArr = ['待初审', '初审未通过', '已上传资料', '已激活/未激活'];
						obj.active = 1;
						obj.processStatus = 'error';
						break;
					case '已上传资料':
						obj.stepArr = ['待初审', '初审通过', '已上传资料', '已激活/未激活'];
						obj.active = 2;
						break;
					case '已激活':
						obj.stepArr = ['待初审', '初审通过', '已上传资料', '已激活'];
						obj.active = 3;
						break;
					case '未激活':
						obj.stepArr = ['待初审', '初审通过', '已上传资料', '未激活'];
						obj.active = 3;
						obj.processStatus = 'error';
						obj.canbtn2 = true;
						break;
				}
				return obj
			}
		},
		methods: {
			addMaterial(){
				this.dialogVisible2 = false;
			}
		},
		created(){
			let that = this;
			//更新用户信息！
			if (!process.server) {
				$cookies.set('agent', aes.Encrypt(JSON.stringify(that.$store.state.agent)));
			}
		}
	}
</script>

<style lang="less">
	#agent-center {
		.main {
			margin: 0 0 0 20px;
		}

		.btns {
			margin-top: 50px;
		}
		.means{
			margin: 20px 0 0 20px;
			.el-dialog__body{
				font-size: 20px;
			}
		}
		.right-menuitem {
			float: right;
		}
	}
</style>
